﻿    var data = [
        {p:{text:"首页",href:"http://www.baidu.com"},c:[]},
        {p:{text:"解决方案",href:"http://www.baidu.com"},c:[
                                        {p:{text:"网络基础系列",href:"http://www.baidu.com"},c:[]},
                                        {p:{text:"数字商务系列",href:"http://www.baidu.com"},c:[]},
                                        {p:{text:"企业通讯系列",href:"http://www.baidu.com"},c:[]},
                                        {p:{text:"网络推广系列",href:"http://www.baidu.com"},c:[]},
                                        {p:{text:"如何购买",href:"http://www.baidu.com"},c:[
                                                                        {p:{text:"styled form",href:"http://www.baidu.com"},c:[]},
                                                                        {p:{text:"active focus",href:"http://www.baidu.com"},c:[]},
                                                                        {p:{text:"hover.click",href:"http://www.baidu.com"},c:[]}
                                                                       ]},
                                        {p:{text:"成功故事",href:"http://www.baidu.com"},c:[]},
                                        {p:{text:"我们的客户",href:"http://www.baidu.com"},c:[]}
                                    ]},        
        {p:{text:"服务于支持",href:"http://www.baidu.com"},c:[
                                       {p:{text:"服务资讯",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"在线服务",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"培训动态",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"热线流程",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"服务网络",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"服务团队",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"服务理念",href:"http://www.baidu.com"},c:[]}
                                    ]},
        {p:{text:"体验中心",href:"http://www.baidu.com"},c:[
                                       {p:{text:"应用体验",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"电子杂志",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"案例展示",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"试用申请",href:"http://www.baidu.com"},c:[]}
                                    ]},
        {p:{text:"新闻中心",href:"http://www.baidu.com"},c:[
                                       {p:{text:"升蓝新闻",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"媒体报道",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"市场资讯",href:"http://www.baidu.com"},c:[]}
                                    ]},
        {p:{text:"关于升蓝",href:"http://www.baidu.com"},c:[
                                       {p:{text:"企业概况",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"企业文化",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"管理团队",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"屡获殊荣",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"大事记",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"社会贡献",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"企业标识",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"合作伙伴",href:"http://www.baidu.com"},c:[]},
                                       {p:{text:"招贤纳士",href:"http://www.baidu.com"},c:[]}
                                    ]}
    ];
    
function createMenu(/*div对象*/menu, data){
    var table = document.createElement('table');
    var tbody = document.createElement('tbody');lee.addStyle(tbody, "{font-size:12px;}");
    table.appendChild(tbody);
    menu.appendChild(table);
    var 目录背景颜色 = "#ccc";
    var 子菜单背景色 = "#eee";
    for(var i = 0; i < data.length; ++i){//遍历1级菜单
        var e = data[i];
        var p = e.p, c = e.c;//简便命名
        var tr11 = document.createElement('tr');
        var td10 = document.createElement('td');td10.innerHTML = "+"; lee.addStyle(td10, "{width:10px;background-color:" + 目录背景颜色 + ";float:left;}");
        var td11 = document.createElement('td');td11.innerHTML = p.text; lee.addStyle(td11, "{width:100px;background-color:" + 目录背景颜色 + ";float:left;}");
        var td12 = document.createElement('td');td12.innerHTML = p.href; lee.addStyle(td12, "{width:180px;background-color:" + 目录背景颜色 + ";}");
        (function(){
            var tr = tr11;
            var 操作单元格样式 = "{width:30px;text-decoration:underline;color:green;background-color:" + 目录背景颜色 + ";}";
            var over样式 = "{color:blue;cursor:pointer;}", out样式 = "{color:green;}";
            
            var td13 = document.createElement('td');td13.innerHTML = "编辑"; lee.addStyle(td13, 操作单元格样式);
            lee.addEvent(td13, 'click', function(){editMenu(tr);});
            lee.addEvent(td13, 'mouseover', function(){lee.addStyle(td13, over样式);});
            lee.addEvent(td13, 'mouseout', function(){lee.addStyle(td13, out样式);});
            
            var td14 = document.createElement('td');td14.innerHTML = "取消"; lee.addStyle(td14, 操作单元格样式);
            lee.addEvent(td14, 'click', function(){cancelEdit(tr);});
            lee.addEvent(td14, 'mouseover', function(){lee.addStyle(td14, over样式);});
            lee.addEvent(td14, 'mouseout', function(){lee.addStyle(td14, out样式);});
            
            var td15 = document.createElement('td');td15.innerHTML = "添加"; lee.addStyle(td15, 操作单元格样式);
            lee.addEvent(td15, 'click', function(){addMenu(tr);});
            lee.addEvent(td15, 'mouseover', function(){lee.addStyle(td15, over样式);});
            lee.addEvent(td15, 'mouseout', function(){lee.addStyle(td15, out样式);});
            
            var td16 = document.createElement('td');td16.innerHTML = "删除"; lee.addStyle(td16, 操作单元格样式);
            lee.addEvent(td16, 'click', function(){deleteMenu(tr);});
            lee.addEvent(td16, 'mouseover', function(){lee.addStyle(td16, over样式);});
            lee.addEvent(td16, 'mouseout', function(){lee.addStyle(td16, out样式);});
                        
            tr11.appendChild(td10); tr11.appendChild(td11); tr11.appendChild(td12); tr11.appendChild(td13); tr11.appendChild(td14); tr11.appendChild(td15); tr11.appendChild(td16);     
        })();
        tbody.appendChild(tr11);
        if(c.length > 0){//包含子菜单
            for(var j = 0; j < c.length; ++j){//遍历2级菜单
                var pp = c[j].p, cc = c[j].c;
                var tr21 = document.createElement('tr');
                var td20 = document.createElement('td');td20.innerHTML = ""; lee.addStyle(td20, "{width:10px;float:left;}");
                var td21 = document.createElement('td');td21.innerHTML = pp.text; lee.addStyle(td21, "{width:100px;background-color:" + 子菜单背景色 + ";float:left;}");
                var td22 = document.createElement('td');td22.innerHTML = pp.href; lee.addStyle(td22, "{width:180px;background-color:" + 子菜单背景色 + ";}");
                
                (function(){
                    var tr = tr21;
                    var 操作单元格样式 = "{width:30px;text-decoration:underline;color:green;background-color:" + 子菜单背景色 + ";}";
                    var over样式 = "{color:blue;cursor:pointer;}", out样式 = "{color:green;}";
                    
                    var td23 = document.createElement('td');td23.innerHTML = "编辑"; lee.addStyle(td23, 操作单元格样式);
                    lee.addEvent(td23, 'click', function(){editMenu(tr);});
                    lee.addEvent(td23, 'mouseover', function(){lee.addStyle(td23, over样式);});
                    lee.addEvent(td23, 'mouseout', function(){lee.addStyle(td23, out样式);});
                                      
                    var td24 = document.createElement('td');td24.innerHTML = "取消"; lee.addStyle(td24, 操作单元格样式);
                    lee.addEvent(td24, 'click', function(){cancelEdit(tr);});
                    lee.addEvent(td24, 'mouseover', function(){lee.addStyle(td24, over样式);});
                    lee.addEvent(td24, 'mouseout', function(){lee.addStyle(td24, out样式);});
                                
                    var td25 = document.createElement('td');td25.innerHTML = "添加"; lee.addStyle(td25, 操作单元格样式);
                    lee.addEvent(td25, 'click', function(){addMenu(tr);});
                    lee.addEvent(td25, 'mouseover', function(){lee.addStyle(td25, over样式);});
                    lee.addEvent(td25, 'mouseout', function(){lee.addStyle(td25, out样式);}); 
                    
                    var td26 = document.createElement('td');td26.innerHTML = "删除"; lee.addStyle(td26, 操作单元格样式);
                    lee.addEvent(td26, 'click', function(){deleteMenu(tr);});
                    lee.addEvent(td26, 'mouseover', function(){lee.addStyle(td26, over样式);});
                    lee.addEvent(td26, 'mouseout', function(){lee.addStyle(td26, out样式);});
            
                    tr21.appendChild(td20); tr21.appendChild(td21); tr21.appendChild(td22); tr21.appendChild(td23); tr21.appendChild(td24); tr21.appendChild(td25); tr21.appendChild(td26);
                })();
                tbody.appendChild(tr21);
//                    if(cc.length > 0){
//                        for(var k = 0; k < cc.length; ++k){//遍历3级菜单
//                            var ppp = cc[k].p;
//                            var ccc = cc[k].c;
//                        }
//                    }
            }
        }
    }
}

function editMenu(tr){
    var td1 = tr.childNodes[1];
    var td2 = tr.childNodes[2];
    if(td1.title != '' || td2.title != '') return;
    td1.title = td1.innerHTML;
    td2.title = td2.innerHTML;
    td1.innerHTML = "<input type='text' disable='true' style='width:93px;' value='" + td1.innerHTML + "'/>";
    td2.innerHTML = "<input type='text' disable='true' style='width:173px;' value='" + td2.innerHTML + "'/>";
}

function cancelEdit(tr){
    //debugger;
    var td1 = tr.childNodes[1];
    var td2 = tr.childNodes[2];
    if(td1.title == '' || td2.title == '') return;
    td1.innerHTML = td1.title; td1.title = '';
    td2.innerHTML = td2.title; td2.title = '';
}

function addMenu(tr){
    //判断是目录行，还是子菜单行
    var issub = tr.childNodes[0].innerHTML == '' ? true : false;
    var tr_clone = tr.cloneNode(true);
    if(issub){
        Array.insertAfter(tr.parentNode.childNodes, tr_clone, tr);
    debugger;
    }
}

function deleteMenu(tr){
    debugger;
}